import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Table, Divider, Button, Form, Input, Popconfirm } from 'antd';
import { setDeleteNotice } from 'Services/publicServer.js';
import { get } from 'lodash';

const STORE_NAME = 'publicServerNotice';
const FormItem = Form.Item;

@connect(state => ({
  [STORE_NAME]: state[STORE_NAME],
  loading: state.loading.effects[`${STORE_NAME}/fetchTableDataSource`],
}))
@Form.create()
class publicServerNotice extends Component {
  constructor(props) {
    super(props);
    window.scope = this;
  }

  componentDidMount() {
    this.fetchData();
  }

  getDataFromStore = key => (key ? this.props[STORE_NAME][key] : this.props[STORE_NAME]);

  fetchData() {
    const { dispatch } = this.props;
    dispatch({
      type: `${STORE_NAME}/fetchTableDataSource`,
    });
  }

  delectItem = id => {
    setDeleteNotice({ id }).then(() => {
      this.fetchData();
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, value) => {
      this.props.dispatch({
        type: `${STORE_NAME}/updateFilterParams`,
        payload: value,
      });
    });
  };

  handlePaginationChange = (pageNo, pageSize) => {
    const { dispatch } = this.props;
    dispatch({
      type: `${STORE_NAME}/updatePagination`,
      payload: { pageNo, pageSize },
    });
  };

  columns = [
    {
      title: '标题',
      key: 'title',
      dataIndex: 'title',
    },
    {
      title: '内容',
      key: 'content',
      dataIndex: 'content',
    },
    {
      title: '创建日期',
      key: 'createDate',
      dataIndex: 'createDate',
    },
    {
      title: '最后修改日期',
      key: 'modifyDate',
      dataIndex: 'modifyDate',
    },
    {
      title: '操作',
      key: 'gener',
      render: (_, { id, title }) => (
        <span>
          <a
            onClick={() => {
              this.props.history.push(`/publicServer/noticeDetail/view/?id=${id}`);
            }}
          >
            查看
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              this.props.dispatch({
                type: `publicServerMessage/updateFilterParams`,
                payload: { noticeTitle: title },
              });
              this.props.history.push(`/publicServer/message`);
            }}
          >
            查看留言
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              this.props.history.push(`/publicServer/noticeDetail/edit/?id=${id}`);
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <Popconfirm title="你确定要删除吗？" onConfirm={this.delectItem.bind(this, id)}>
            <a>删除</a>
          </Popconfirm>
        </span>
      ),
    },
  ];

  pagination = () => ({
    current: +this.getDataFromStore('pageNo'),
    pageSize: +this.getDataFromStore('pageSize'),
    total: +this.getDataFromStore('total'),
    showQuickJumper: true,
    showSizeChanger: true,
    onChange: this.handlePaginationChange,
    onShowSizeChange: this.handlePaginationChange,
  });

  render() {
    const { columns, pagination } = this;
    const { tableDataSource: dataSource, filterParams } = this.getDataFromStore();
    const { getFieldDecorator } = this.props.form;

    return (
      <div>
        <Card
          title="公告管理"
          extra={
            <Button
              type="primary"
              onClick={() => {
                this.props.history.push(`/publicServer/noticeDetail/add/`);
              }}
            >
              添加公告
            </Button>
          }
        >
          <Form onSubmit={this.handleSubmit} layout="inline" style={{ margin: '0 12px 12px' }}>
            <FormItem label="公告标题">
              {getFieldDecorator('title', {
                initialValue: get(filterParams, 'title', ''),
              })(<Input placeholder="请输入标题查询" />)}
            </FormItem>
          </Form>
          <Table
            bordered
            rowKey="id"
            loading={this.props.loading}
            columns={columns}
            dataSource={dataSource}
            pagination={pagination()}
          />
        </Card>
      </div>
    );
  }
}

export default publicServerNotice;
